<template>
    <div class="detail-main">
      <div class="detail" :style="{backgroundImage: 'url(' + headerData.pic_url + ')',backgroundSize:'cover'}">
        <div class="name">{{headerData.name}}</div>
        <span class="line"></span>
      </div>
      <div class="text">{{headerData.simple_desc}}</div>
      <div class="br"></div>
     
      <van-empty description="暂无数据" v-if="detalist"  />
       <div class="list" v-else>
         <div class="item" v-for="item in detaillist" :key="item.id">
            <img :src="item.list_pic_url" alt="">
            <div class="title">{{item.name}}</div>
            <div class="price">￥{{item.retail_price}}</div>
         </div>
      </div>
      
    </div>
</template>

<script>
import homeApi from "@/netapi/home/home.js"
export default {
  name:"HomeBranddetail",
    components: {

    },
    data() {
        return {
          headerData:[],
          detaillist:[]
        };
    },
    computed: {
      detalist(){
        return this.detaillist.length == 0
      }
    },
    created() {
      console.log(this.$route.params.id);
      this.getDetail()
    },
    mounted() {

    },
    methods: {
      getDetail(){
        homeApi.BrandDetail({
          id:this.$route.params.id
        })
        .then(res=>{
          
          this.headerData = res.data;
          this.detaillist = res.goodsList;
          console.log(res);
        })
      }
    },
};
</script>

<style scoped lang="scss">
.detail-main{
  width: 100%;
  .detail{
    margin-top: 46px;
    width: 100%;
    height: 144px;
    background: no-repeat center;
    display: flex;

    .name{
      margin: auto;
      text-align: center;
      
      font-size: 20px;
      color:#fffbe1;
      border-bottom: 3px solid #fffbe1;
      padding-bottom: 5px;
    }
   
  }
  .text{
    width: calc(100vw - 40px);
    padding-top: 20px;
    margin:  0 auto;
    font-size: 20px;
    color: #BBBBBB;
    height: 102px;
    
  }
  .br{
    width: 100%;
    height: 8px;
    background-color: #f4f4f4;
  }
  .list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #F4F4F4;
    .item{
      width: 186px;
      text-align: center;
      background-color: #fff;
      margin-bottom: 4px;
      height: 240px;
      img{
        width: 100%;
        height: 170px;
      }
      .price{
        margin-top: 20px;
        color: red;
      }
    }
  }
  
}
</style>
